<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="../js/vue.js"></script>
    <script src="../js/axios-0.18.0.js"></script>
    <script src="../js/jquery.min.js"></script>
    <script src="../plugins/elementui/index.js"></script>
    <link rel="stylesheet" href="../plugins/elementui/index.css">
    <link rel="stylesheet" href="../plugins/font-awesome/css/font-awesome.css">
    <link rel="stylesheet" href="../plugins/font-awesome/css/font-awesome.min.css">
</head>
<body>
<div id="app">
    username：
    <el-input style="width: 200px" size="mini" v-model="pageUser.username" placeholder="请输入用户名"></el-input>
    gender：
    <el-input style="width: 200px" size="mini" v-model="pageUser.gender" placeholder="请输入性别"></el-input>
    email：
    <el-input style="width: 200px" size="mini" v-model="pageUser.email" placeholder="请输入邮箱"></el-input>
    <el-button @click="find" type="mini" icon="el-icon-search" style="color: #409EFF">搜索</el-button>
    <el-button @click="add" type="mini">添加</el-button>

    <el-table :data="users" stripe>
        <el-table-column prop="id" label="序号"></el-table-column>
        <el-table-column prop="username" label="用户名"></el-table-column>
        <el-table-column prop="password" label="密码"></el-table-column>
        <el-table-column prop="gender" label="性别"></el-table-column>
        <el-table-column prop="email" label="邮箱"></el-table-column>
        <el-table-column label="操作" align="center">
            <!--
            slot-scope：作用域插槽，可以获取表格数据
            scope：代表表格数据，可以通过scope.row来获取表格当前行数据，scope不是固定写法
            -->
            <template slot-scope="scope">
                <el-button type="primary" size="mini" @click="handleUpdate(scope.row)">编辑
                </el-button>
                <el-button type="danger" icon="el-icon-delete "size="mini" @click="handleDelete(scope.row)">
                </el-button>
            </template>
        </el-table-column>

    </el-table>
    <el-pagination
            @size-change="handleSizeChange"
            @current-change="handleCurrentChange"
            :current-page="pageCurrent"
            :page-size="pageSize"
            :page-sizes="[1, 2, 3, 4]"
            layout="total, sizes,prev, pager, next, jumper"
            :total="total">
    </el-pagination>
    <el-dialog
            title="添加用户"
            :visible.sync="dialogVisible"
            width="50%"
            :before-close="handleClose">
        <el-form :model="fromData">
            <el-row>
                <el-col>
                    <el-form-item label="序号">
                        <el-input v-model="fromData.id"/>
                    </el-form-item>
                </el-col>
            </el-row>
            <el-row>
                <el-col>
                    <el-form-item label="用户名">
                        <el-input v-model="fromData.username"/>
                    </el-form-item>
                </el-col>
            </el-row>
            <el-row>
                <el-col>
                    <el-form-item label="性别">
                        <el-input v-model="fromData.gender"/>
                    </el-form-item>
                </el-col>
            </el-row>
            <el-row>
                <el-col>
                    <el-form-item label="密码">
                        <el-input v-model="fromData.password"/>
                    </el-form-item>
                </el-col>
            </el-row>
            <el-row>
                <el-col>
                    <el-form-item label="邮箱">
                        <el-input v-model="fromData.email"/>
                    </el-form-item>
                </el-col>
            </el-row>
        </el-form>
        <span slot="footer" class="dialog-footer">
    <el-button @click="cancel">取消</el-button>
    <el-button type="primary" @click="handleAdd">确定</el-button>
  </span>
    </el-dialog>
    <el-dialog
            title="修改用户"
            :visible.sync="editDialogFormVisible"
            width="50%"
            :before-close="handleClose">
        <el-form :model="fromData">
            <el-row>
                <el-col>
                    <el-form-item label="序号">
                        <el-input v-model="fromData.id"/>
                    </el-form-item>
                </el-col>
            </el-row>
            <el-row>
                <el-col>
                    <el-form-item label="用户名">
                        <el-input v-model="fromData.username"/>
                    </el-form-item>
                </el-col>
            </el-row>
            <el-row>
                <el-col>
                    <el-form-item label="性别">
                        <el-input v-model="fromData.gender"/>
                    </el-form-item>
                </el-col>
            </el-row>
            <el-row>
                <el-col>
                    <el-form-item label="密码">
                        <el-input v-model="fromData.password"/>
                    </el-form-item>
                </el-col>
            </el-row>
            <el-row>
                <el-col>
                    <el-form-item label="邮箱">
                        <el-input v-model="fromData.email"/>
                    </el-form-item>
                </el-col>
            </el-row>
        </el-form>
        <span slot="footer" class="dialog-footer">
    <el-button @click="cancel">取消</el-button>
    <el-button type="primary" @click="handleEdit">确定</el-button>
  </span>
    </el-dialog>
</div>
<script>
    new Vue({
        el: '#app',
        data: {
            fromData: {},
            dialogVisible: false,
            editDialogFormVisible:false,
            users: [],
            pageCurrent: 1,
            pageSize: 5,
            total: 1,
            pageUser: {
                "username": "",
                "password": "",
                "email": ""
            },
            addDialogFormVisible: false
        },
        created() {
            this.find();
        },
        methods: {
            handleUpdate(row) {
                axios.get("/users/" + row.id).then(res => {
                    if (res.data.flag===true) {
                        this.$message.success(res.data.message);
                        this.editDialogFormVisible = true;
                        console.log(res);
                        this.fromData=res.data.data;
                    }else{
                        this.$message.error((res.data.message));
                    }
                })
            },
            add() {
                this.dialogVisible = true;
                this.fromData={}
            },
            handleDelete(row) {
                this.$confirm("此操作永久删除当前信息，是否继续？", "提示", {type: "warning"}).then(() => {
                    axios.delete("/users/" + row.id).then((res) => {
                        this.find();
                     })
                })
            },
            find() {
                axios.post("/users/" + this.pageCurrent + "/" + this.pageSize, this.pageUser).then(res => {
                    // R(Boolean flag,String message,Object data(Long total,Result<User> r))
                    console.log(res);
                    if (res.data.flag === true) {
                        this.$message.success(res.data.message);
                        this.total = res.data.data.total;
                        this.users = res.data.data.users;
                    } else {
                        this.$message.error(res.data.message);
                    }
                })
            },
            handleCurrentChange(page) {
                this.pageCurrent = page;
                this.find();
                console.log(`每页 ${val} 条`);
            },
            handleSizeChange(page) {
                this.pageSize = page;
                this.find();
                console.log(`当前页: ${page}`);
            },

            cancel() {
                this.dialogVisible = false;
                this.editDialogFormVisible=false;
            },
            handleAdd() {
                axios.post("/users", this.fromData).then(res => {
                    if (res.data.flag == true) {
                        this.$message.success(res.data.message);
                    } else {
                        this.$message.error(res.data.message);
                    }
                    this.find();
                });
                this.dialogVisible=false;

            },
            handleEdit(){
                axios.put("/users" , this.fromData).then(res => {
                    console.log(res);
                    if (res.data.flag == true) {
                        this.$message.success(res.data.message);
                    } else {
                        this.$message.error(res.data.message);
                    }
                    this.editDialogFormVisible = false;
                    this.find();
                })
            }
        }
    });
</script>
</body>
</html>